<template>
  <div class="detail">
    <div class="buttons">
      <el-button
        @click="jump(-1)"
        type="primary">返回</el-button>
      <el-button
        @click="getItems"
        type="primary">刷新</el-button>
      <el-button
        @click="showCollectionPointTravel = true"
        type="primary">集合点统计</el-button>
      <el-button
        @click="jump('/api/admin.export.travel?group_stage_id=' + group_stage_id, true)"
        type="primary">导出出行人</el-button>
      <el-button
        @click="jump('/api/admin.export.points.in.the.car?group_stage_id=' + group_stage_id, true)"
        type="primary">导出分车信息</el-button>
      <el-button
        @click="jump('/api/admin.export.insurance?group_stage_id=' + group_stage_id, true)"
        type="primary">导出保险信息</el-button>
    </div>
    <div class="buttons">
      <el-checkbox border v-model="onlyShowSuccess">只显示报名成功</el-checkbox>
    </div>
    <el-table
      v-loading="loading"
      element-loading-text="数据载入中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255,255,255, 0.4)"
      border
      :default-expand-all="true"
      :data="items">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div class="travel-item" style="background-color: #f4f4f4">
            <div class="item">姓名</div>
            <div class="item">性别</div>
            <div class="item">类型</div>
            <div class="item">电话</div>
            <div class="item">证件号</div>
            <div class="item">取消原因</div>
            <div class="item">报名价格</div>
            <div class="item">上车点</div>
            <div class="item">状态</div>
            <div class="item">操作</div>
          </div>
          <template v-for="(attach, idx) in scope.row.attach">
            <div class="travel-item" :key="'travel-item-' + idx">
              <div class="item">{{attach.fullname}}</div>
              <div class="item">{{travelSex[attach.travel_sex]}}</div>
              <div class="item">{{travelType[attach.travel_type]}}</div>
              <div class="item">{{attach.travel_mobile}}</div>
              <div class="item">
                {{attach.travel_certificate_number}}
                <br />
                {{certificateType[attach.travel_certificate_type]}}
              </div>
              <div class="item">{{attach.cancel_reason}}</div>
              <div class="item">{{(Number(attach.price) / 100).toFixed(2)}}</div>
              <div class="item">{{attach.title ? attach.title : attach.address}}</div>
              <div class="item" v-html="attachStatus[attach.status]"></div>
              <div class="item">
                <template v-if="attach.status === 99">
                  <!--<el-button type="primary" size="little">编辑</el-button>-->
                  <el-button
                    type="danger"
                    @click="cancelTravelByPay(attach.id, scope.row.pay_method)"
                    size="little">取消</el-button>
                </template>
              </div>
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        label="订单号">
        <template slot-scope="scope">
          {{scope.row.order_no}}
        </template>
      </el-table-column>
      <el-table-column
        label="联系人">
        <template slot-scope="scope">
          {{scope.row.member.nickname}}
        </template>
      </el-table-column>
      <el-table-column
        label="联系电话">
        <template slot-scope="scope">
          {{scope.row.member.mobile}}
        </template>
      </el-table-column>
      <el-table-column
        label="支付单号">
        <template slot-scope="scope">
          {{scope.row.pay_no}}
        </template>
      </el-table-column>
      <el-table-column
        label="报名时间">
        <template slot-scope="scope">
          {{scope.row.sign_up_date}}
        </template>
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          <p v-html="orderStatus[scope.row.status]"></p>
        </template>
      </el-table-column>
      <el-table-column
        label="付款方式">
        <template slot-scope="scope">
          {{payMethods[scope.row.pay_method]}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            @click="action_order_no = scope.row.order_no; showOrderDetail = true"
            type="primary"
            size="little">详情</el-button>
          <el-button
            v-if="scope.row.status === 99"
            @click="cancelByPay(scope.row.order_no, scope.row.pay_method)"
            type="danger"
            size="little">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <ui-order-detail
      :order-no="action_order_no"
      :show.sync="showOrderDetail"></ui-order-detail>
    <ui-collection-point-travel
      :group-stage-id="Number(group_stage_id)"
      :show.sync="showCollectionPointTravel"></ui-collection-point-travel>
  </div>
</template>
<script>
import uiOrderDetail from './order-detail'
import uiCollectionPointTravel from './collection-point-travel'
export default {
  components: {
    uiOrderDetail,
    uiCollectionPointTravel
  },
  data () {
    return {
      showCollectionPointTravel: false,
      onlyShowSuccess: false,
      action_order_no: '',
      showOrderDetail: false,
      orderStatus: {
        1: '<span style="color: darkorange">待支付</span>',
        2: '<span style="color: red">支付超时(交易关闭)</span>',
        3: '<span style="color: red">订单已全部退款</span>',
        4: '<span style="color: red">交易关闭(未支付时出行人被全部取消)</span>',
        5: '<span style="color: darkorange">申请取消中</span>',
        99: '<span style="color: green">报名成功</span>'
      },
      attachStatus: {
        1: '<span style="color: darkorange">待支付</span>',
        2: '<span style="color: red">已取消(未支付)</span>',
        3: '<span style="color: red">已取消(已退款)</span>',
        4: '<span style="color: darkorange">申请取消中</span>',
        5: '<span style="color: darkorange">退款中</span>',
        99: '<span style="color: green">报名成功</span>'
      },
      travelSex: {
        1: '男',
        2: '女'
      },
      travelType: {
        1: '成人',
        2: '儿童'
      },
      certificateType: {
        1: '大陆身份证',
        2: '香港证件',
        3: '澳门证件',
        4: '台湾证件',
        5: '护照'
      },
      payMethods: {
        1: '微信支付(公众号)',
        2: '微信支付(小程序)',
        3: '支付宝支付'
      },
      items: [],
      group_stage_id: '',
      loading: false
    }
  },
  watch: {
    showOrderDetail (val) {
      if (!val) {
        this.getItems()
      }
    },
    onlyShowSuccess (val) {
      this.storage().set('onlyShowSuccess', val)
      this.getItems()
    }
  },
  methods: {

    /**
     *  取消已支付订单
     */
    cancelByPay (orderNo, payMethod) {
      let notice = '请输入取消理由,'
      switch (payMethod) {
        case 1:
          notice += '资金将原路返回到该用户的微信账户中，并且此操作无法恢复'
          break
        case 2:
          notice += '资金将原路返回到该用户的微信账户中，并且此操作无法恢复'
          break
        case 3:
          notice += '资金将原路返回到该用户的支付宝账户中，并且此操作无法恢复'
          break
      }
      this.$prompt(notice, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (!value) {
          this.toast('请输入取消理由', 'error')
          return false
        }
        this.showLoading()
        this
          .$api
          .activityOrder
          .cancelByPay(orderNo, value)
          .then(r => {
            this.toast('取消成功')
            this.getItems()
          })
      }).catch(() => {})
    },
    /**
     *  取消出行人并退款
     */
    cancelTravelByPay (attachId, payMethod) {
      let notice = '请输入取消理由,'
      switch (payMethod) {
        case 1:
          notice += '资金将原路返回到该用户的微信账户中，并且此操作无法恢复'
          break
        case 2:
          notice += '资金将原路返回到该用户的微信账户中，并且此操作无法恢复'
          break
        case 3:
          notice += '资金将原路返回到该用户的支付宝账户中，并且此操作无法恢复'
          break
      }
      this.$prompt(notice, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (!value) {
          this.toast('请输入取消理由', 'error')
          return false
        }
        this.showLoading()
        this
          .$api
          .activityOrder
          .cancelTravelByPay(attachId, value)
          .then(r => {
            this.toast('取消成功')
            this.getItems()
          })
      }).catch(() => {})
    },
    /**
     * @purpose 获取报名记录数据
     */
    getItems () {
      this.loading = true
      this
        .$api
        .activityOrder
        .itemsByGroupStage(this.group_stage_id)
        .then(r => {
          this.loading = false
          this.items = r
          if (this.onlyShowSuccess) {
            this.items = this.items.filter(item => {
              return item.status === 99
            })
            this.items = this.items.map(item => {
              item.attach = item.attach.filter(item => {
                return item.status === 99
              })
              return item
            })
          }
        })
        .catch(() => {
          this.loading = false
        })
    }
  },
  created () {
    if (this.$route.params.group_stage_id) {
      this.group_stage_id = this.$route.params.group_stage_id
    }
    let onlyShowSuccess = this.storage().get('onlyShowSuccess')
    if (onlyShowSuccess) {
      this.onlyShowSuccess = onlyShowSuccess
    }
    this.getItems()
  }
}
</script>
<style lang="sass">
  .el-table__expanded-cell
    padding: 10px !important
  .item
    .el-button--little.el-button + .el-button
      margin: 0 0 0 5px
  .el-checkbox
    background-color: #ffffff
</style>
<style scoped lang="sass">
  .travel-item
    width: 100%
    min-height: 41px
    display: flex
    align-items: center
    justify-content: center
    border: 1px solid #f4f4f4
    border-top: none
    &:hover
      background-color: #f4f4f4
    .item
      height: 100%
      flex: 1
      display: flex
      align-items: center
      line-height: 1.2rem
      padding: .5rem .5rem .5rem 1rem
</style>
